<div class="modal-header">
  <h3 class="modal-title">
    <span translate>Associate Floating IP Address</span>
  </h3>
</div>
<div class="modal-body">
  <p translate>Select a floating IP address to associate with the load balancer or a floating IP pool in which to allocate a new floating IP address.</p>
  <div ng-form="form">
    <div class="row">
      <div class="col-sm-12 col-md-6">
        <div class="form-group required">
          <label class="control-label" for="floating-ip">
            <translate>Floating IP address or pool</translate>
            <span class="hz-icon-required fa fa-asterisk"></span>
          </label>
          <select class="form-control" name="floating-ip" id="floating-ip"
                  ng-options="item.name group by item.group for item in modal.options"
                  ng-model="modal.selected" ng-required="true">
          </select>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="modal-footer">
  <button class="btn btn-sm btn-default" ng-click="modal.cancel()">
    <span class="fa fa-close"></span>
    <span translate>Cancel</span>
  </button>
  <button class="btn btn-sm btn-primary"
          ng-click="modal.save()"
          ng-disabled="form.$invalid || modal.saving">
    <span class="fa" ng-class="modal.saving ? 'fa-spinner fa-spin' : 'fa-check'"></span>
    <span translate>Associate</span>
  </button>
</div>
